<!DOCTYPE html>
<html lang="en">
<head>
  <title>登陆</title>
  <meta charset="UTF-8"/>
  <link rel="shortcut icon" href="/imgs/head.ico"/>
  <!--vue-->
  <script src="/js/vue.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="/css/index.css">
  <!-- 引入组件库 -->
  <script src="/js/index.js"></script>
  <!--axios-->
  <script src="/js/axios.min.js"></script>
  <link rel="stylesheet" href="static/login/bootstrap.min.css"/>
  <link rel="stylesheet" href="static/login/css/camera.css"/>
  <script
          type="text/javascript"
          src="static/login/js/jquery-1.5.1.min.js"
  ></script>
  <script src="static/js/jquery-1.7.2.js"></script>
  <script src="static/login/js/camera.min.js"></script>
  <script src="static/login/js/templatemo_script.js"></script>
  <script src="static/login/js/ban.js"></script>
  <script src="static/login/js/jquery.easing.1.3.js"></script>
  <script src="static/login/js/jquery.mobile.customized.min.js"></script>
  <style type="text/css">
    .cavs {
      z-index: 2;
      position: fixed;
      width: 95%;
      margin-left: 20px;
      margin-right: 20px;
    }
    .logoP {
      height: 60px;
      position: absolute;
      z-index: 1;
      top: 8%;
      left: 7%;
      width: 40px;
    }
    .logo {
      position: absolute;
      top: 10%;
      left: 10%;
      z-index: 1;
      color: #fff;
      font: normal 30px 'LianMengQiYiLuShuaiZhengRuiHeiTi' ;
    }
    .form {
      background-color: rgba(255, 255, 255, .3);
      width: 20%;
      height: 400px;
      position: absolute;
      z-index: 3;
      top: 180px;
      left: 37.5%;
      padding: 30px;
    }

    .logins {
      font: normal bolder 30px 'LianMengQiYiLuShuaiZhengRuiHeiTi';
      color: black;
      text-align: center;
      display: block;
      margin-top: 20px;
      margin-bottom: 20px;
    }

    #username {
      background-color: rgb(237, 237, 237);
      width: 90%;
      height: 50px;
      margin-top: 20px;
      border: 0;
      padding-left: 20px;
      font-size: 17px;
    }

    #password {
      background-color: rgb(237, 237, 237);
      width: 90%;
      height: 50px;
      margin-top: 20px;
      border: 0;
      padding-left: 20px;
      font-size: 17px;
    }

    @font-face {
      font-family: "LianMengQiYiLuShuaiZhengRuiHeiTi-2";
      src: url("../../css/LianMengQiYiLuShuaiZhengRuiHeiTi-2.ttf");
    }
    #login {
      text-decoration: none;
      position: relative;
      border: none;
      font-size: 14px;
      font-family: inherit;
      color: #fff;
      width: 100px;
      height: 50px;
      line-height: 2em;
      text-align: center;
      background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
      background-size: 300%;
      border-radius: 30px;
      z-index: 1;
      margin: 60px auto;
    }

    #login:hover {
      animation: ani 8s linear infinite;
      border: none;
    }

    @keyframes ani {
      0% {
        background-position: 0%;
      }

      100% {
        background-position: 400%;
      }
    }
    #login:hover::before {
      filter: blur(20px);
    }

    #login:active {
      background: linear-gradient(32deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    }

    .learn-more {
      position: relative;
      display: inline-block;
      cursor: pointer;
      outline: none;
      border: 0;
      vertical-align: middle;
      text-decoration: none;
      background: transparent;
      padding: 0;
      font-size: inherit;
      font-family: inherit;
    }

    button.learn-more {
      width: 12rem;
      height: auto;
    }

    button.learn-more .circle {
      transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
      position: relative;
      display: block;
      margin: 0;
      width: 3rem;
      height: 3rem;
      background: #282936;
      border-radius: 1.625rem;
    }

    button.learn-more .circle .icon {
      transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      background: #fff;
    }

    button.learn-more .circle .icon.arrow {
      transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
      left: 0.625rem;
      width: 1.125rem;
      height: 0.125rem;
      background: none;
    }

    button.learn-more .circle .icon.arrow::before {
      position: absolute;
      content: "";
      top: -0.29rem;
      right: 0.0625rem;
      width: 0.625rem;
      height: 0.625rem;
      border-top: 0.125rem solid #fff;
      border-right: 0.125rem solid #fff;
      transform: rotate(45deg);
    }

    button.learn-more .button-text {
      transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 0.75rem 0;
      margin: 0 0 0 1.85rem;
      color: #282936;
      font-weight: 700;
      line-height: 1.6;
      text-align: center;
      text-transform: uppercase;
    }

    .learn-more:hover .circle {
      width: 100%;
    }

    .learn-more:hover .circle .icon.arrow {
      background: #fff;
      transform: translate(1rem, 0);
    }

    .learn-more:hover .button-text {
      color: #fff;
    }
  </style>
</head>
<body>
<img class="logoP" src="static/login/images/logo.png" alt="">
<div class="logo">趣哪儿</div>
<div class="form">
  <form id="modifyPassword" class="form-horizontal" action="#" method="post">
    <span class="logins">登录</span>
    <input v-model="userName" type="text" id="username" name="userName"
           placeholder="用户名"
           value="">
    <input v-model="passWord" type="password" id="password" name="passWord"
           placeholder="密码">
    <button type="button" id="login" @click="login">登录</button>
    <button class="learn-more">
              <span class="circle" aria-hidden="true">
                <span class="icon arrow"></span>
              </span>
      <span class="button-text"><a href="#" @click="goZC" target="_blank">去注册</a></span>
    </button>
  </form>
</div>
<canvas class="cavs"></canvas>
<div id="templatemo_banner_slide" class="container_wapper">
  <div class="camera_wrap camera_emboss" id="camera_slide">
    <div data-src="static/login/images/banner_slide_01.jpg"></div>
    <div data-src="static/login/images/banner_slide_02.jpg"></div>
    <div data-src="static/login/images/banner_slide_03.jpg"></div>
    <div data-src="static/login/images/banner_slide_04.jpg"></div>
    <div data-src="static/login/images/banner_slide_05.jpg"></div>
  </div>
</div>
<script>
  var vue = new Vue({
    el: ".form",
    data: {
      userName: 'ljb',
      passWord: '123456',
    },
    methods: {
      goZC(){
        location.href="zclogin.html";
        window.close();
      },
      login() {
        _this = this;
        console.log("登录。。。。。。。。。。。。");
        if (this.userName == '' || this.passWord == '') {
          _this.$message.error("用户名和密码不能为空！");
          return;
        }
        //用户登录
        axios.post('/tuser/login?loginName=' + this.userName + "&passWord=" + this.passWord).then(function (response) {
          if (response.data.code == 200) {
            location.href = "/html/lvyoule_11_10/indexshiyan.html";
          } else {
            _this.$message.error("用户名或者密码错误");
          }
        }).catch(function (error) {
          console.log(error);
          _this.$message.error("你错了。。。");
        });
      },
    }
  });
</script>
</body>
</html>